<!-- 商店信息 -->
<template>
	<view class="bot-wrap">
		<uni-popup @change="change" ref="popupshop" type="bottom" :animation="true" :durationAnim="250">
			<view class="popup-content detail-body" :style="{height:'80vh'}">
				<view class="vrow flex-end">
					<uni-icons type="closeempty" size="24" @click="show = false" color="#999"></uni-icons>
				</view>
				<view class="pop-top" id="pop-top">
				</view>
				<view>
					<view class="mb40 flex-column fit-width flex flex-items-center flex-center">
						<image src="../../static/logo.png" class="logo" />
						<view class="blod f40 mt30">{{config.appName}}</view>
						<view class="f30 mt10">{{config.appDesc}}</view>
					</view>
					
					<view class="line"></view>
					<NjaCell icon="../../static/icons/icon-phone.png" @click="callPhone" :label="config.phone" :height="60" event border></NjaCell>
					<NjaCell icon="../../static/icons/icon-wechat.png" @click="copyWechat" :label="config.wechat" :height="60" event border></NjaCell>
					<NjaCell icon="../../static/icons/icon-address.png" @click="showMap" :label="config.address" :height="60" event></NjaCell>
					<view class="line"></view>
					<view class="p30">
					<button class="bigbtn2" open-type="contact" >联系客服</button>
					</view>
				 </view>
				</view>
		</uni-popup>
	</view>
</template>

<script>
	import NjaCell from '@/components/nja-cell/index.vue'
	export default {
		props: {
			config: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		components: {NjaCell},
		data () {
			return {
				show: false
			}
		},
		watch: {
			show: {
				handler: function(val) {
					wx.nextTick(()=>{
			            this.$refs.popupshop[this.show ? 'open' : 'close']()
					})
				},
				immediate: true
			},
		},
		methods: {
			showMap () {
				var value = {longitude: this.config.lng, latitude: this.config.lat, name: '店家地址', address: this.config.address}
				uni.openLocation({
				  longitude: Number(value.longitude),
				  latitude: Number(value.latitude),
				  name: value.name,
				  address: value.address
				})
			},
			copyWechat () {
				uni.setClipboardData({
					data: this.config.wechat,
					success: function () {
						uni.showToast({
							title: '已复制',
							duration: 2000
						});
					}
				});
			},
			callPhone () {
				uni.makePhoneCall({
					phoneNumber: this.config.phone
				});
			},
			showDetail() {
				this.show = true
			},
			change(e){
			    this.show = e.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bot{
	    &-wrap{
	        position: relative;
	        position: fixed;
	        bottom: 0;
	        left: 0;
	        right: 0;
	        border: 0;
	        z-index: 200;
	    }
	}
	.pop{
	    &-top{
	        padding-bottom: 30rpx;
	    }
	    &-scroll{
	        width: 100%;
	        box-sizing: border-box;
	        height: 100%;
	        flex: 1;
	        overflow: hidden;
	    }
	    
	}
    .popup-content{
		z-index: 999;
        background-color: rgba($color: #fff, $alpha: 1.0);
        max-height: calc(80vh);
        min-height: calc(30vh);
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
    }
	.detail-body {
		padding: 30rpx;
	}
	.logo {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		border: 1px solid #fff;
	}
	.big-img {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
	}
</style>
